<template>
    <div class="box">
        <div class="header_box">
            <HeaderView>
                <template v-slot:center>
                    <div class="header_box_main"  @click="toCustomerReply">
                       选择日期区间
                    </div>
                </template>
            </HeaderView>
        </div>

        <div>
            <van-cell title="选择日期区间" :value="date" @click="show = true" />
            <van-calendar v-model="show" type="range" @confirm="onConfirm" />
        </div>
    </div>
    
</template>
<script>
    import HeaderView from '@/components/header1View.vue';
   export default {
    data() {
        return {
            date: '',
            show: false,
        };
    },
    methods: {
        formatDate(date) {
            return `${date.getMonth() + 1}/${date.getDate()}`;
        },
        onConfirm(date) {
            const [start, end] = date;
            this.show = false;
            this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
        },
    },
    components:{
        HeaderView
    }
};
</script>
<style scoped>
    .header_box_main{
        width: 200px;
        text-align: center;
        margin:0 auto;
    }

</style>